<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" @click="addCount">新增</el-button>
                <el-button type="success" @click="editRole">修改</el-button>
                <el-button type="danger" @click="delCount">删除</el-button>
            </div>
            <el-table :data="tableData" border stripe class="table" ref="multipleTable" @selection-change="handleSelectionChangeTable" @row-click="handleRowClick">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="deviceName" align="center" label="名称">
                </el-table-column>
                <el-table-column prop="comProtocalName" align="center" label="所属性质">
                </el-table-column>
                <el-table-column prop="port" align="center" label="简介">
                </el-table-column>

            </el-table>

            <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="page_total" :page-size="page_size">
                </el-pagination>
            </div>
        </div>
        <!-- 新增组织弹出框 -->
        <el-dialog :title="diologTitle" :visible.sync="addVisible" width="70%" >
            <el-form ref="form" :model="form" label-width="144px" class="limit-small">
                <el-form-item label="名称" class="limit-width">
                    <el-input v-model="form.name"></el-input>
                </el-form-item >

                <el-form-item label="所属性质">
                    <el-checkbox-group v-model="form.type">
                        <el-checkbox label="图表分析" name="type"></el-checkbox>
                        <el-checkbox label="统计报表" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="描述信息" class="limit-width">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="form.desc" style="width: 70%;">
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    import {getAdministrationPage} from '../../../api/index';
    export default {
        name: "",
        data() {
            return {
                tableData:[],
                cur_page: 1,
                page_size:10,
                page_total:1,
                multipleSelection: [],//当前行
                diologTitle:'新增组织',
                addVisible:false,
                isEditInfo:false,
                delVisible:false,
                form: {
                    name: '123',//名称
                    type: ['图表分析'],
                    desc: '123'
                },
            }
        },
        created() {
            this.getData();
        },
        beforeDestroy(){

        },
        watch:{
        },
        methods: {
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;
                console.log(this.cur_page)
                this.getData();
            },

            //获取数据以及分页
            getData(){
                //分页接口
                getAdministrationPage({
                    pageNum:this.cur_page,
                    pageSize:this.page_size
                }).then((res) =>{
                    console.log(res)
                    // console.log(res.data)
                    this.tableData = res.data.list;
                    this.page_total = res.data.total;
                    this.page_size =res.data.pageSize;
                    // console.log(this.page_size)
                })
            },
            //勾选选中当前行
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //点击行触发，选中或不选中复选框
            handleRowClick(row, column, event){
                this.$refs.multipleTable.toggleRowSelection(row);
            },
            //点击当前行选中当前行
            handleSelectionChangeTable(val){
                this.multipleSelection = val;
            },
            save() {

            },
            // 确定删除
            deleteRow(){
                var delCountId = new Array();
                for(var i=0;i<this.multipleSelection.length;i++){
                    delCountId.push(this.multipleSelection[i].deviceId)
                }
            },
            //点击新增
            addCount(){
                this.addVisible = true;
                this.isEditInfo = false;
                this.diologTitle = '新增组织';
                this.form= {
                    name: '',//名称
                    type: [],
                    desc: ''
                }
            },
            //点击修改
            editRole(){
                if(this.multipleSelection.length < 1){
                    this.$message.error('请选择需要修改的组织');
                }else
                if(this.multipleSelection.length == 1){
                    console.log(this.multipleSelection)
                    this.addVisible = true;
                    this.isEditInfo = true;
                    this.diologTitle = '修改组织';
                    this.form.name= this.multipleSelection[0].deviceName;//名称
                }else{
                    this.$message.error('一次只能修改一个组织');
                }
                console.log(this.multipleSelection)
            },
            //点击删除
            delCount(){
                if(this.multipleSelection.length < 1){
                    this.$message.error('请选择需要删除的组织');
                }else
                {
                    this.delVisible = true;
                }
            }
        }
    }
</script>

<style scoped>
    /deep/ .el-form-item__content{
        margin-left: 0 !important;
    }

    .handle-box {
        margin-bottom: 20px;
        margin-top: 20px;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .el-dialog{
        max-height:600px;
        overflow-y: scroll;
    }
    .el-select{
        width:50%;
    }
    .el-input{
        width:50%;
    }
    .limit-small{
        overflow: hidden;
    }
    .el-scrollbar .el-scrollbar__view .el-select-dropdown__item{
        height: auto;
        max-height: 274px;
        padding: 0;
        overflow: hidden;
        overflow-y: auto;
    }
    .el-form-item::after, .el-form-item::before {
        clear: both;
    }
</style>